<template>
    <view
        class="diy-text component-diy"
        :style="
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
		
    >
	
        <view
            class="top"
            :style="
                'background-color: ' +
                componentData.data.backgroundColor +
                ';padding: ' +
                componentData.data.paddingTopBottom * 2 +
                'rpx ' +
                componentData.data.paddingLeftRight * 2 +
                'rpx;'
            "
        >
            <view class="content">
                <view
                    class="title"
                    :style="
                        'color:' +
                        componentData.data.titleColor +
                        ';font-size: ' +
                        componentData.data.titleFontSize * 2 +
                        'rpx;font-weight:' +
                        componentData.data.titleFontWeight +
                        ';'
                    "
                >
                    {{ componentData.data.title }}
                </view>
                <view
                    class="desc"
                    v-if="componentData.data.desc"
                    :style="
                        'color:' +
                        componentData.data.descColor +
                        ';font-size: ' +
                        componentData.data.descFontSize * 2 +
                        'rpx;font-weight:' +
                        componentData.data.descFontWeight +
                        ';padding-left: ' +
                        componentData.data.descRetract * 2 +
                        'rpx;margin-top: ' +
                        componentData.data.descMarginTop * 2 +
                        'rpx;'
                    "
                >
                    {{ componentData.data.desc }}
                </view>
            </view>
            <block v-if="componentData.data.viewMore">
                <diy-navigator :url="componentData.data.url" @callback="callback">
                    <view class=" ">
                        <view class="view-more blue" v-if="!componentData.data.viewMoreType || componentData.data.viewMoreType == 0">{{ componentData.data.viewMoreText }}</view>
                        <view class="view-more" v-else-if="componentData.data.viewMoreType == 1">
                            {{ componentData.data.viewMoreText }}
                            <text class="iconfont icon-youjiantou"></text>
                        </view>
                        <view class="view-more" v-else-if="componentData.data.viewMoreType == 2">
                            <text class="iconfont icon-youjiantou"></text>
                        </view>
                    </view>
                </diy-navigator>
            </block>
        </view>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// components/diy-text/diy-text.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        toMore() {
            // wx.navigateTo({
            //   url: this.data.componentData.data.url,
            // })
        }
    }
};
</script>
<style>
@import './diy-text.css';
</style>
